<template>
    <div>
        <div style="height: 580px;" ref="map1"></div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const map1 = ref(null);

const loadMap = () => {
    AMapLoader.load({
        key: "a7669a1200c3b852d0f184dc1afc337b", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    })
        .then((AMap) => {
            const map = new AMap.Map(map1.value, {
                pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
                viewMode: '3D', //地图模式
                rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
                pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
                zoom: 17, //初始化地图层级
                rotation: -15, //初始地图顺时针旋转的角度
                zooms: [2, 20], //地图显示的缩放级别范围
                center: [103.826928, 36.056291], //地图中心点
                mapStyle: "amap://styles/darkblue",
            });
            //给地图设置标记点
            const marker = new AMap.Marker({
                position: [103.826928, 36.056291],
                offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
                icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                title: "兰州站"
            });
            map.add(marker);
            AMap.plugin("AMap.DistrictSearch", function () {
                let polygons = [];
                var opts = {
                    subdistrict: 0, //获取边界不需要返回下级行政区
                    extensions: "all", //返回行政区边界坐标组等具体信息
                    level: "district", //查询行政级别为 市
                };
                let district = new AMap.DistrictSearch(opts);
                district.setExtensions("all");
                district.search("兰州市", function (status, result) {
                    map.remove(polygons); //清除上次结果
                    polygons = [];
                    var bounds = result.districtList[0].boundaries;
                    if (bounds) {
                        for (var i = 0, l = bounds.length; i < l; i++) {
                            //生成行政区划polygon
                            var polygon = new AMap.Polygon({
                                strokeWeight: 5,
                                path: bounds[i],
                                fillOpacity: 0.4,
                                fillColor: "#80d8ff",
                                strokeColor: "#0091ea",
                            });
                            polygons.push(polygon);
                        }
                    }
                    map.add(polygons);
                    map.setFitView(polygons); //视口自适应
                });
            });

        })
        .catch((e) => {
            console.error(e); //加载错误提示
        });
}
onMounted(() => {
    loadMap()
})
</script>
<style scoped lang="less"></style>